<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<head>
  <title>
    {{lang.global.title.spray}} | Valora | GamerNoTitle
  </title>
  {% include "public/head.html" %}
</head>
<script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="165758" async="async"
  type="text/javascript"></script>

<body class="index-page">
  {% include 'public/body.html' %}

  {% include 'public/components/announcement.html' %}

  {% include 'public/components/nav.html' %}

  {% include 'public/components/header.html' %}

  {% include "public/components/library/accessory_buttons.html" %}
  <div width="100%">
    <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.accessorylib.spray.title}}</h1>
    <br>
    {% include "public/components/library/item_buttons.html" %}
    <br>
  </div>

  <div class="container">
    <div class="row">
      {% for spray in spray_list %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm rounded">
          <div class="gun-image">
            <a href="{{spray.preview}}" data-fancybox="gallery">
              <img height=auto width=100% class="text-center" src={{spray.preview|safe}}>
            </a>
          </div>
          <div class="card-body">
            <h3 class="text-gradient text-primary mb-0 mt-2">{{spray.name|safe}}</h3>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <section>
    <footer class="footer pt-5 mt-5">
      <hr class="horizontal dark mb-5">
      <div class="container">
        <div class=" row">
          <div class="col-md-3 mb-4 ms-auto">
            <div>
              <h6 class="text-gradient text-primary font-weight-bolder">GamerNoTitle</h6>
            </div>
            <div>
              <h6 class="mt-3 mb-2 opacity-8">Social</h6>
              <ul class="d-flex flex-row ms-n3 nav">
                <li class="nav-item">
                  <a class="nav-link pe-1" href="https://bili33.top" target="_blank">
                    <i class="fas fa-home text-lg opacity-8" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pe-1" href="https://twitter.com/GamerNoTitle" target="_blank">
                    <i class="fab fa-twitter text-lg opacity-8" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pe-1" href="https://github.com/GamerNoTitle" target="_blank">
                    <i class="fab fa-github text-lg opacity-8" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pe-1" href="https://www.youtube.com/@GamerNoTitle" target="_blank">
                    <i class="fab fa-youtube text-lg opacity-8" aria-hidden="true"></i>
                  </a>
                </li>
              </ul>
              <!-- <li class="nav-item"> -->
              <!-- <a href="http://beian.miit.gov.cn/" class="nav-link" target=_blank><img
                    src='https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png' width=20px height=20px> 沪ICP备
                  2021023713号</a> -->
              <!-- </li> -->
            </div>
          </div>
          <div class="col-md-2 col-sm-6 col-6 mb-4">
            <!-- <div>
                <h6 class="text-gradient text-primary text-sm">Company</h6>
                <ul class="flex-column ms-n3 nav">
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.creative-tim.com/presentation" target="_blank">
                      About Us
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.creative-tim.com/templates/free" target="_blank">
                      Freebies
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.creative-tim.com/templates/premium" target="_blank">
                      Premium Tools
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.creative-tim.com/blog" target="_blank">
                      Blog
                    </a>
                  </li>
                </ul>
              </div> -->
          </div>
          <div class="col-md-2 col-sm-6 col-6 mb-4">
            <div>
              <!-- <h6 class="text-gradient text-primary text-sm">Resources</h6>
                <ul class="flex-column ms-n3 nav">
                  <li class="nav-item">
                    <a class="nav-link" href="https://iradesign.io/" target="_blank">
                      Illustrations
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.creative-tim.com/bits" target="_blank">
                      Bits &amp; Snippets
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.creative-tim.com/affiliates/new" target="_blank">
                      Affiliate Program
                    </a>
                  </li>
                </ul> -->
            </div>
          </div>
          <div class="col-md-2 col-sm-6 col-6 mb-4">
            <div>
              <h6 class="text-gradient text-primary text-sm">Help &amp; Support</h6>
              <ul class="flex-column ms-n3 nav">
                <li class="nav-item">
                  <a class="nav-link" href="https://t.me/PaffChannel" target="_blank">
                    Telegram Channel
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://t.me/DohnaNyan" target="_blank">
                    Telegram Group
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://bili33.top/sponsors" target="_blank">
                    Sponsorships
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://status.val.bili33.top/" target="_blank">
                    Status Page
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-2 col-sm-6 col-6 mb-4 me-auto">
            <div>
              <h6 class="text-gradient text-primary text-sm">Legal</h6>
              <ul class="flex-column ms-n3 nav">
                <li class="nav-item">
                  <a class="nav-link"
                    href="https://gamernotitle.notion.site/gamernotitle/VSC-FAQ-86f072f8cebf4a8d9453a795b24cd507"
                    target="_blank">
                    FAQ
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"
                    href="https://gamernotitle.notion.site/gamernotitle/VALORA-FAQ-86f072f8cebf4a8d9453a795b24cd507#12ddcd236fdb4c6abf205eb55587ccbc"
                    target="_blank">
                    Disclaimer
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/EULA" target="_blank">
                    Licenses (EULA)
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-12">
            <div class="text-center">
              <p class="my-4 text-sm">
                <strong>
                  <p class="text-danger text-gradient">Riot Games, Valorant, and any associated logos are trademarks,
                    service marks, and/or
                    registered trademarks of Riotgames, lnc. Valora is not associated with Riot Games, lnc.</p>
                </strong>
                All rights reserved. Copyright ©
                <script>document.write(new Date().getFullYear())</script> <a href="https://bili33.top"
                  target="_blank"><u>GamerNoTitle</u></a>. | Open-Source project <a
                  href="https://github.com/GamerNoTitle/Valora" target="_blank"><u>Valora</u></a> is avaliable on
                Github.
                <a href="http://beian.miit.gov.cn/" class="nav-link" id="icp" target=_blank><img
                    src='https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png' width=20px height=20px> 沪ICP备
                  2021023713号</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </section>
  <script>
    // 获取当前页面的域名
    const domain = window.location.hostname;

    // 判断域名是否符合要求
    if (!domain.endsWith('bili33.top')) {
      // 如果不符合要求，则隐藏元素
      document.getElementById('icp').style.display = 'none';
    }
  </script>
  <script>
    $(document).ready(function () {
      $("[data-fancybox]").fancybox({
        buttons: [
          "zoom",
          "slideShow",
          "fullScreen",
          "download",
          "thumbs",
          "close"
        ]
      });
    });
  </script>
  <script>
    // 获取关闭按钮和悬浮窗元素
    const announcementNotice = document.getElementById('announcementNotice');
    const announcementBtn = document.getElementById('announcementBtn');

    // 关闭悬浮窗
    function closeannouncementNotice() {
      announcementNotice.style.animation = 'fadeOut 1s';
      setTimeout(() => {
        announcementNotice.style.display = 'none';
      }, 1000);
    }

    // 设置关闭按钮的点击事件
    announcementBtn.addEventListener('click', setLocalStorage);

    // 检查是否设置了localStorage，如果设置了，则关闭悬浮窗
    function checkLocalStorage() {
      // 获取当前页面的announcement_id
      const currentAnnouncementId = "{{announcement_id}}";
      const currentAnnouncement = `{{announcement}}`;

      // 获取localStorage中保存的announcement_id
      const localStorageValue = localStorage.getItem("announcementNoticeId");
      const localStorageAnn = localStorage.getItem("announcementNotice");

      // 如果localStorage中的announcement_id与当前页面的announcement_id相同，则不弹出悬浮窗
      if (localStorageValue === currentAnnouncementId || localStorageAnn === currentAnnouncement) {
        announcementNotice.style.display = 'none';
      } else {
        announcementNotice.style.display = 'flex';
      }
    }

    // 设置localStorage，并关闭悬浮窗
    function setLocalStorage() {
      const currentAnnouncementId = "{{announcement_id}}";
      const currentAnnouncement = `{{announcement}}`
      localStorage.setItem("announcementNoticeId", currentAnnouncementId);
      localStorage.setItem("announcementNotice", currentAnnouncement);
      closeannouncementNotice();
    }

    // 在页面加载完成后检查localStorage
    document.addEventListener('DOMContentLoaded', checkLocalStorage);
  </script>

</body>